<!DOCTYPE html>
<!-- 测试基本折线表，并设置其属性 -->
<html lang="en">
	<head>
		<title>v-charts</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
	</head>
	<body>
		<div id="app">
			<ve-line :data="chartData" :settings="chartSettings" :event="chartEvent" :extend="chartExtend"></ve-line>
		</div>

	</body>

	<script>
		new Vue({
			el: "#app",
			data() {
				this.chartSettings = {
					xAxisType:'category',
					yAxisType: ['0.[00]a', '0.[00]%'],
					axisSite: {
						right: ['下单率']
					},
					yAxisName: ['数值轴', '比率轴'],
					min:[400,6000],
					legendName:{
						'访问用户': '设置图表上方图例的别名'
					},
					labelMap:{'下单用户':'设置指标的别名'},
					log:true
				}
				this.chartEvent = {
					
				}
				this.chartExtend = {
					// series (v) {
					//   v.forEach(i => {
					//     i.barWidth = 10
					//   })
					//   console.log("双双最棒")
					//   return v
					// },
					// tooltip (v) {
					//   v.trigger = 'none'
					//   return v
					// }
					 itemStyle:{
							  areaColor:"#eee"
						 },
					series: {
						 label: {
							 show: true,
							 color:"#c83"
						 },
						
					}
				}
				return {
					chartData: {
						columns: ['日期', '访问用户', '下单用户', '下单率'],
						rows: [{
								'日期': '1/1',
								'访问用户': 1393,
								'下单用户': 1093,
								'下单率': 0.32
							},
							{
								'日期': '1/2',
								'访问用户': 3530,
								'下单用户': 3230,
								'下单率': 0.26
							},
							{
								'日期': '1/3',
								'访问用户': 2923,
								'下单用户': 2623,
								'下单率': 0.76
							},
							{
								'日期': '1/4',
								'访问用户': 1723,
								'下单用户': 1423,
								'下单率': 0.49
							},
							{
								'日期': '1/5',
								'访问用户': 3792,
								'下单用户': 3492,
								'下单率': 0.323
							},
							{
								'日期': '1/6',
								'访问用户': 4593,
								'下单用户': 4293,
								'下单率': 0.78
							}
						]
					}
				}
			}
		})
	</script>

</html>
